<template>
    <el-dialog v-model="visible" title="胆码组" width="800px" :close-on-click-modal="false" :show-close="false">
        <div>
            <!-- <div style="color: #d90000; font-weight: bold; font-size: 16px; margin-bottom: 10px;">胆码组</div> -->
            <div v-for="(group, groupIdx) in groups" :key="groupIdx"
                style="display: flex; align-items: center; margin-bottom: 4px;">
                <span style="width: 40px; color: #333;">组{{ groupIdx + 1 }}</span>
                <div style="display: flex; gap: 0px;">
                    <el-button v-for="n in 10" :key="n" size="small"
                        :type="group.nums.includes(n - 1) ? 'primary' : 'default'" @click="toggleNum(groupIdx, n - 1)"
                        style="width: 24px; padding: 0;">{{ n - 1 }}</el-button>
                </div>
                <el-button size="small" @click="selectAll(groupIdx)" style="margin-left: 6px;">全</el-button>
                <el-button size="small" @click="clearAll(groupIdx)">清</el-button>
                <span style="margin-left: 20px; margin-right: 4px;">出</span>
                <div style="display: flex; gap: 0px;">
                    <el-button v-for="n2 in 4" :key="n2" size="small"
                        :type="group.appear.includes(n2 - 1) ? 'danger' : 'default'"
                        @click="toggleAppear(groupIdx, n2 - 1)" style="width: 24px; padding: 0;">{{ n2 - 1
                        }}</el-button>
                    <span style="margin-left: 4px;">个</span>
                </div>
                <el-button size="small" style="margin-left: 8px;">容错</el-button>
            </div>
            <div style="color: #888; font-size: 13px; margin-top: 8px;">
                胆码组说明：由0-9个数字组成的数字组合，这组数字中包含几个不确定出的数字，组合起来确定出号。如果设定胆码为123出现次数为3，则生成27注直选：111 112 113 ...，7注组选：112 113
                122 ...。
            </div>
            <div style="margin-top: 12px; display: flex; align-items: center;">
                <el-checkbox v-model="enableTolerance" label="容错" size="small" style="margin-right: 10px;" />
                <el-select v-model="tolerance1" size="small" style="width: 60px; margin-left: 4px;">
                    <el-option v-for="n in 10" :key="n" :label="n - 1" :value="n - 1" />
                </el-select>
                <span style="margin: 0 4px;">--</span>
                <el-select v-model="tolerance2" size="small" style="width: 60px;">
                    <el-option v-for="n in 10" :key="n" :label="n - 1" :value="n - 1" />
                </el-select>
            </div>
        </div>
        <template #footer>
            <div style="display: flex; justify-content: flex-end; gap: 10px;">
                <el-switch v-model="retain" class="mb-2" active-text="保留" inactive-text="排除" />
                <el-button type="primary" @click="handleConfirm">确定添加</el-button>
                <el-button type="danger" @click="visible = false">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
const props = defineProps({
    modelValue: Boolean,
    editItem: Object
});
const emit = defineEmits(['update:modelValue', 'add-filter']);
const visible = ref(props.modelValue);
watch(() => props.modelValue, v => visible.value = v);
watch(visible, v => emit('update:modelValue', v));
const groups = reactive(Array.from({ length: 12 }, () => ({
    nums: [],
    appear: [],
})));

watch(
    [() => props.editItem, visible],
    ([val, vis]) => {
        if (vis && val && val.condition) {
            // 先清空
            groups.forEach(g => {
                g.nums = [];
                g.appear = [];
            });
            val.condition.forEach((c, idx) => {
                if (idx < groups.length) {
                    const [nums, appear] = c.nums.split('-');
                    groups[idx].nums = nums ? nums.split(',').filter(x => x !== "").map(Number) : [];
                    groups[idx].appear = appear ? appear.split(',').filter(x => x !== "").map(Number) : [];
                }
            });
            // 其他属性可根据需要补充
        }
    },
    { immediate: true }
);
const tolerance1 = ref(0);
const tolerance2 = ref(0);
const enableTolerance = ref(false);
const retain = ref(true);

const toggleNum = (groupIdx, num) => {
    const arr = groups[groupIdx].nums;
    const i = arr.indexOf(num);
    if (i === -1) arr.push(num);
    else arr.splice(i, 1);
}
const toggleAppear = (groupIdx, num) => {
    const arr = groups[groupIdx].appear;
    const i = arr.indexOf(num);
    if (i === -1) arr.push(num);
    else arr.splice(i, 1);
}
const selectAll = (groupIdx) => {
    groups[groupIdx].nums = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
}
const clearAll = (groupIdx) => {
    groups[groupIdx].nums = [];
}

const handleConfirm = () => {
    // 生成 condition 数组
    const condition = groups
        .map((g, idx) => {
            if (g.nums.length === 0 && g.appear.length === 0) return null;
            return {
                nums: g.nums.join(',') + '-' + g.appear.join(','),
                enabled: retain.value ? '保留' : '排除'
            };
        })
        .filter(Boolean);
    if (condition.length === 0) {
        visible.value = false;
        return;
    }
    let filter;
    if (props.editItem && props.editItem.id) {
        // 编辑模式，保留原id
        filter = {
            ...props.editItem,
            title: '胆码组',
            condition,
            enabled: true
        };
    } else {
        // 新增
        filter = {
            id: Date.now(),
            title: '胆码组',
            condition,
            enabled: true
        };
    }
    emit('add-filter', filter);
    visible.value = false;
}
</script>

<style scoped>
.el-dialog__body {
    padding-top: 10px;
    padding-bottom: 0;
}
</style>
